<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.css">
<script src="webjars/jquery/jquery.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<script src="webjars/bootstrap/js/bootstrap.js"></script>
<body>

<center>
    <fieldset style="width: 900px;">
        <legend>综合查询</legend>
        姓名：<input type="text" name="zusername" id="zusername" value=""/>

        编号：<input type="text" name="zpassword" id="zpassword" value="" placeholder="请填入编号"/>
        身份：   <input type="radio"   name="zstatus" value="admin"> 管理员
                  <input type="radio"   name="zstatus" value="user"> 用户
        <input type="button" value="综合查询" id="zxBtn" onclick="findby()">
        <!--  模态框-->
        <button class="btn btn-primary" id="mymodalbtn">添加人员</button>
    </fieldset>
</center>

<!--tale-->
<table id="testTable" property="1" border="1">
</table>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">新增用户信息</h4>
            </div>
            <div class="modal-body">
                <form id="iform">
                <div class="input-group">
                    <input type="hidden" class="form-control" id="id" name="id" value="">
                    <span class="input-group-addon">姓名</span>
                    <input type="text" class="form-control" id="username" name="username" value="">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">编号</span>
                    <input type="text" class="form-control" id="password" name="password" value="">
                </div>
                <div class="radio">
                    <label>
                        <input type="radio"   name="status" id="optionsRadios1"
                               value="admin" checked> 管理员
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="status" id="optionsRadios2"
                               value="user">  普通用户
                    </label>
                </div>
                </form>
<!--                -->
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Btben">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
    $(function () {
        $("#mymodalbtn").on("click",function () {
            $("#myModal").modal({
                backdrop: "static",
                keyboard: false
            });
            $("#myModal").modal("show");
            $('#myModal').on('hide.bs.modal', function () {
                document.getElementById("iform").reset()
            })
        })
        data();
        $("#Btben").on("click",function () {
            var id=$("#id").val();
            if(id==null || id==""){
                $.ajax({
                    type: "POST",
                    url: "user/sava",
                    data:$("#iform").serialize(),
                    success: function(msg){
                        if(msg==true){
                            alert("添加成功！")
                            $("#testTable").bootstrapTable("refresh");
                            $("#myModal").modal("hide");

                        }else{
                            alert("添加失败");
                            $("#myModal").modal("hide");
                        }

                    }
                });
            }else {

                updateByid();
            }

        })
    });
    function  data() {

        $('#testTable').bootstrapTable({
            url: 'user/queryList',
            queryParams: function (params) {
                return {
                    offset: params.offset,
                    limit: params.limit,
                     username: $('#zusername').val(),
                     password: $('#zpassword').val(),
                     status: $('input[name="zstatus"]:checked').val()
                }
            },
            columns: [{
                field: 'id',
                title: '编号'
            }, {
                field: 'username',
                title: '姓名'
            }, {
                field: 'password',
                title: '密码'
            }, {
                field: 'status',
                title: '身份',
                formatter:function(value,row,index){
                    var value="";
                    if(row.status=="admin"){
                        value = "管理员";
                    }else{
                        value = "用户" ;
                    }

                    return value;}

            }, {
                formatter: function (value, row, index) {
                    return [
                        '<a href="##" onclick="onUPdate(' + row.id + ')">' +
                        '<i class="glyphicon glyphicon-pencil"  ></i>修改' +
                        '</a>',
                        '<a href="javascript:delPer(' + row.id + ')" onclick="onRemove(' + row.id + ')">' +
                        '<i class="glyphicon glyphicon-remove"></i>删除' +
                        '</a>'
                    ].join('');
                },
                title: '操作'
            }],
            striped: true,
            pagination: true,
            sidePagination: 'server',
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100],
            rowStyle: function (row, index) {
                var classesArr = ['success', 'info'];
                             var strclass = "";
                               if (index % 2 === 0) {//偶数行
                                      strclass = classesArr[0];
                                 } else {//奇数行
                                  strclass = classesArr[1];
                                }
                               return { classes: strclass };
            },
        });

    }
    function  onRemove(id) {
        $.ajax({
            type: "POST",
            url: "user/delete/"+id,
            // data:$("#iform").serialize(),
            success: function(msg){
                if(msg==true){
                    alert("删除成功！");
                    $("#testTable").bootstrapTable("refresh");
                }else{
                    alert("删除失败");
                }

            }
        });
    }


    function  onUPdate(row) {

        $.ajax({
            type: "POST",
            url: "user/selectByid",
            data:{
                "id":row
            },
            success: function(msg){
                $("#myModal").modal("show");
                $("#id").val(msg.id);
                $("#username").val(msg.username);
                $("#password").val(msg.password);
                $("input:radio[value='"+msg.status+"']").attr('checked','true');

            }
        });


        console.log(row);
    }

    function  updateByid() {
        $.ajax({
            type: "POST",
            url: "user/update",
            data:$("#iform").serialize(),
            success: function(msg){
                if(msg==true){
                    alert("修改成功！");
                    $("#testTable").bootstrapTable("refresh");
                    $("#myModal").modal("hide");
                }else{
                    alert("修改失败");
                }

            }
        });
    }
    function  findby() {
        $("#testTable").bootstrapTable('refresh', {url: 'user/queryBy'});

    }
</script>